(function(){
	var Model = function(){
		this.initTime();
		this.initArea();
		var me = this;
		//为text输入框添加校验事件，方法是先获取所有的text输入框，存放到txts数组中，再遍历txts数组，对发生了blur（失去焦点）事件的文本框进行校验（validate，就是下面写的校验模块）
		var txts = document.querySelectorAll("[type='text']");
		txts.forEach(function(txt){
			txt.addEventListener("blur", function(){
				//alert(txt.value);			txts.value表示input文本输入框中的文本
				var r = me.validate(txt.getAttribute('check'), txt.value);
				if(r !== undefined){		//而不是null
					txt.nextSibling.nextSibling.innerHTML = r;		//注意不能写成innerHtml。。。找了半天错html就这点特烦
					txt.setAttribute("class", "field_wrong");		//修改样式（就是边框变红）
				}
				else{
					txt.nextSibling.nextSibling.innerHTML = '';
					txt.setAttribute("class", "field");
				}
			})
		})
		//同理为password输入框也添加
		var txts = document.querySelectorAll("[type='password']");
		txts.forEach(function(txt){
			txt.addEventListener("blur", function(){
				//alert(txt.value);			txts.value表示input文本输入框中的文本
				var r = me.validate(txt.getAttribute('check'), txt.value);
				if(r !== undefined){		//而不是null
					txt.nextSibling.nextSibling.innerHTML = r;		//注意不能写成innerHtml。。。找了半天错html就这点特烦
					txt.setAttribute("class", "field_wrong");		//修改样式（就是边框变红）
				}
				else{
					txt.nextSibling.nextSibling.innerHTML = '';
					txt.setAttribute("class", "field");
				}
			})
		})
	}

	/**
	*给页面中的时间下拉栏添加数据（年月日）
	*/
	Model.prototype.initTime = function(){
		var year = document.querySelector("[name='birthYear']");
		var month = document.querySelector("[name='birthMonth']");
		var day = document.querySelector('[name="birthDay"]');
		//初始化年月日
		var shtml = '';
		for(var i = 1900; i <= 2016; i++){
			shtml += "<option value='" + i + "'>" + i + '年' + "</option>";
		}
		year.innerHTML = shtml;
		shtml = '';
		for(var i = 1; i <= 12; i++){
			shtml += "<option value='" + i + "'>" + i + "月" + "</option>";
		}
		month.innerHTML = shtml;
		
		shtml = '';
		var vy = year.value;
		var vm = month.value;
		var days = 31;
		if(vm == 2){
			if(vy % 4 == 0)
				days = 29;
			else days = 28;
		}
		else if(vm == 4 || vm == 6 || vm == 9 || vm == 11){
			days = 30;
		}
		shtml = '';
		for(var i = 1; i <= days; i++){
			shtml += "<option value='" + i + "'>" + i + "日" + "</option>";
		}
		day.innerHTML = shtml;
		
		year.addEventListener('change', function(){
			updateDay();
		})
		month.addEventListener('change', function(){
			updateDay();
		})
		function updateDay(){
			var vy = year.value;
			var vm = month.value;
			var days = 31;
			if(vm == 2){
				if((vy % 4 == 0 && vy % 100 !== 0) || vy % 400 == 0)
					days = 29;
				else days = 28;
			}
			else if(vm == 4 || vm == 6 || vm == 9 || vm == 11){
				days = 30;
			}
			shtml = '';
			for(var i = 1; i <= days; i++){
				shtml += "<option value='" + i + "'>" + i + "日" + "</option>";
			}
			day.innerHTML = shtml;
		}
	}



	/**
	 * 初始化地区(和上面那个添加时间下拉栏的函数类似)
	 */
	Model.prototype.initArea = function(){
		//存放地区信息
		var countries = ['中国' ,'美国' ,'俄罗斯','日本'];
		//注意这儿我给俄罗斯和日本添加了一个空格，和下面cities对应。不这样的话，实际交互的时候会有bug（原因是这样的，交互上地点和时间不一样，地点每次更换，后面所有地点都要更新，而时间则没有这个必要）。
		var provinces = {
			'中国':['北京','上海','四川'],
			'美国':['华盛顿','纽约','洛杉矶'],
			'俄罗斯':[' '],
			'日本':[' ']
		};
		var cities = {
			'北京':['北京'],
			'上海':['上海'],
			'四川':['泸州','绵阳'],
			'华盛顿':[''],
			'纽约':[''],
			'洛杉矶':[''],
			' ':['']
		};
		
		//获取option标签
		var country = document.querySelector("[name='country']");
		var province = document.querySelector("[name='province']");
		var city = document.querySelector('[name="city"]');
		//更改国家的option标签内容
		var shtml = '';
		for(var i = 0 ; i < countries.length; i++){
			shtml += "<option value = '" + countries[i] + "'" + ">" + countries[i] + "</option>";
		}
		country.innerHTML = shtml;
		shtml = '';
		for(var j = 0 ; j < provinces[country.value].length; j++){
			shtml += "<option value ='" + provinces[country.value][j] + "'" + ">" + provinces[country.value][j] + "</option>";
		}
		province.innerHTML = shtml;
		
		shtml = '';
		for(var j = 0 ; j < cities[province.value].length; j++){
			shtml += "<option value ='" + cities[province.value][j] + "'" + ">" + cities[province.value][j] + "</option>";
		}
		city.innerHTML = shtml;
		
		country.addEventListener('change', function(){
			updateProvince();
			updateCity();
		})
		province.addEventListener('change', function(){
			updateCity();
		})
		//因为province和city会随着country的变化而变化，所以需要和上面updateDay一样写一个函数来更新数据
		function updateProvince(){
			shtml = '';
			for(var j = 0 ; j < provinces[country.value].length; j++){
				shtml += "<option value ='" + provinces[country.value][j] + "'" + ">" + provinces[country.value][j] + "</option>";
			}
			province.innerHTML = shtml;
		}
		function updateCity(){
			shtml = '';
			for(var j = 0 ; j < cities[province.value].length; j++){
				shtml += "<option value ='" + cities[province.value][j] + "'" + ">" + cities[province.value][j] + "</option>";
			}
			city.innerHTML = shtml;
		}
	}


	/**
	 * 利用HTML中添加的 check ，判断输入是否为空或者是否合法
	 * 校验模块
	 */
	Model.prototype.validate = function(valStr, val){
		//一种新的语法?其实就是数组的写法
		var validObj = {
			empty:function(){
				return val !== '';
			},
			mobile:function(){
				//用到正则表达式
				var reg = new RegExp(/^1[3578]\d{9}$/);
				return reg.test(val);
			}
		};
		
		var msgObj = {
			empty:"不能为空",
			mobile:"请输入合法的手机号码"
		};
		
		var arr = valStr.split('|');			//将传入进来的check的值（利用getAttribute）进行分割，分割符是'|'
		var r = false;
		//js中forEach的用法。v表示当前arr数组中的某一值
		//typeof的作用？返回值的类型，具体见下
		/*
		 1. 'undefined' --- 这个值未定义；
		 2. 'boolean'    --- 这个值是布尔值；
		 3. 'string'        --- 这个值是字符串；
		 4. 'number'     --- 这个值是数值；
		 5. 'object'       --- 这个值是对象或null；
		 6. 'function'    --- 这个值是函数。
		 */
		for(var i = 0 ; i < arr.length; i++){
			var v = arr[i];
			if(typeof validObj[v] === 'function'){
				r = validObj[v]();
				if(r === false){
					return msgObj[v];
				}
			}
		}
	}
	window.regist = Model;
}());
